import React, { Fragment } from 'react'
import { StyleSheet, View, Text } from 'react-native'
import { ScaleS, ScaleT, ONE_PIXEL, WIDTH } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import { TabView } from 'react-native-tab-view'
import { connect } from 'react-redux'
import { UPDATE_USERINFO_ACTION } from '@store/actions/userinfo'
import CustomButton from 'src/components/button/CustomButton'
import NavigationUtil from 'src/utils/NavigationUtil'
import Animated from 'react-native-reanimated'
import JobList from './JobList'
import ArchiveList from './ArchiveList'

// 发送行为
const mapDispatchToProps = dispatch => ({
  updateUserInfo(payload) {
    dispatch(UPDATE_USERINFO_ACTION(payload))
  }
})

@connect(
  ({ userinfo, BMineCenterStore }) => ({
    userId: userinfo.userId,
    company: BMineCenterStore.company
  }),
  mapDispatchToProps
)
class SchoolRecruitment extends BasePage {
  constructor(props) {
    super(props)
    const routerName = props.navigation.getParam('routerName')
    const activeIndex = (routerName === '投递' || routerName === '已录用') ? 1 : 0
    this.state = {
      header: {},
      activeIndex,
      routes: [
        {
          key: 'jobTab',
          title: '职位管理'
        },
        {
          key: 'postTab',
          title: '简历管理'
        }
      ]
    }
  }

  componentDidMount() {

  }

  renderNavigationBarChild = () => {
    const { item: { name } } = this.props.navigation.state.params
    return (
      <Text>{name}</Text>
    )
  }

  childRender() {
    const { activeIndex, routes } = this.state
    // const { routerName } = this.props.navigation.state.params
    // if (routerName === '投递') {
    //   this.setState({ activeIndex: 1 })
    // }
    return (
      <TabView
        navigationState={{
          index: activeIndex,
          routes
        }}
        renderScene={this.renderScene}
        renderTabBar={this.renderTabBar}
        onIndexChange={this.setTabIndex}
        initialLayout={{ width: WIDTH }}
      />
    )
  }

  setTabIndex = activeIndex => {
    this.setState({ activeIndex })
  }
  renderTabBar = props => {
    const { index, routes } = props.navigationState
    return (
      <View style={styles.tabBar}>
        {routes.map((route, i) => {
          return (
            <Fragment key={i}
            >
              <CustomButton
                params={i}
                style={styles.tabItem}
                onPress={this.setTabIndex}
              >
                <Animated.Text
                  style={[styles.tabText, i === index && styles.activeTabText]}
                >
                  {route.title}
                </Animated.Text>
              </CustomButton>
              {i !== routes.length - 1 && <View style={styles.rightLine} />}
            </Fragment>
          )
        })}
      </View>
    )
  }

  renderScene = ({ route = {} }) => {
    const { item: { id: channelId }, routerName } = this.props.navigation.state.params
    switch (route.key) {
      case 'jobTab':
        return <JobList channelId={channelId} />
      case 'postTab':
        return <ArchiveList routerName={routerName} jumpThrowResume={this.jumpThrowResume} channelId={channelId} />
      default:
        return null
    }
  }
}

export default SchoolRecruitment

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F9FAFA',
    paddingTop: ScaleS(22)
  },
  tabBar: {
    height: ScaleS(66),
    backgroundColor: '#FFFFFF',
    flexDirection: 'row',
    alignItems: 'center'
  },
  tabItem: {
    justifyContent: 'center',
    alignItems: 'center',
    width: ScaleS(92)
  },
  tabText: {
    fontSize: ScaleT(13),
    fontWeight: '500',
    color: '#999999'
  },
  activeTabText: {
    color: '#3C3C3C'
  },
  rightLine: {
    width: ONE_PIXEL,
    height: ScaleS(10),
    backgroundColor: '#979797'
  },
  naviText: {
    fontSize: ScaleT(16),
    fontWeight: '500',
    color: '#3C3C3C'
  }
})
